import {
  defineComponent,
  ref,
  resolveDirective,
  withDirectives,
  openBlock,
  createElementBlock,
  createElementVNode,
  unref
} from "vue";
import { b as useProp, _ as _export_sfc } from "./index-CEDaTd93.js";
const _hoisted_1 = { class: "dv-border-box-2" };
const _hoisted_2 = ["width", "height"];
const _hoisted_3 = ["fill", "points"];
const _hoisted_4 = ["stroke", "points"];
const _hoisted_5 = ["stroke", "points"];
const _hoisted_6 = ["fill"];
const _hoisted_7 = ["fill", "cx"];
const _hoisted_8 = ["fill", "cx", "cy"];
const _hoisted_9 = ["fill", "cy"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "BorderBox",
  props: {
    component: {}
  },
  setup(__props) {
    const props = __props;
    const { propValue } = useProp(props.component);
    const width = ref(150);
    const height = ref(150);
    const resizeHandler = entry => {
      const rect = entry.contentRect;
      width.value = rect.width;
      height.value = rect.height;
    };
    return (_ctx, _cache) => {
      const _directive_resize = resolveDirective("resize");
      return withDirectives(
        (openBlock(),
        createElementBlock("div", _hoisted_1, [
          (openBlock(),
          createElementBlock(
            "svg",
            {
              class: "dv-border-svg-container",
              width: width.value,
              height: height.value
            },
            [
              createElementVNode(
                "polygon",
                {
                  fill: unref(propValue).base.backgroundColor,
                  points: `
          7, 7 ${width.value - 7}, 7 ${width.value - 7}, ${
                    height.value - 7
                  } 7, ${height.value - 7}
        `
                },
                null,
                8,
                _hoisted_3
              ),
              createElementVNode(
                "polyline",
                {
                  stroke: unref(propValue).base.color1,
                  points: `2, 2 ${width.value - 2} ,2 ${width.value - 2}, ${
                    height.value - 2
                  } 2, ${height.value - 2} 2, 2`
                },
                null,
                8,
                _hoisted_4
              ),
              createElementVNode(
                "polyline",
                {
                  stroke: unref(propValue).base.color2,
                  points: `6, 6 ${width.value - 6}, 6 ${width.value - 6}, ${
                    height.value - 6
                  } 6, ${height.value - 6} 6, 6`
                },
                null,
                8,
                _hoisted_5
              ),
              createElementVNode(
                "circle",
                {
                  fill: unref(propValue).base.color1,
                  cx: "11",
                  cy: "11",
                  r: "1"
                },
                null,
                8,
                _hoisted_6
              ),
              createElementVNode(
                "circle",
                {
                  fill: unref(propValue).base.color1,
                  cx: width.value - 11,
                  cy: "11",
                  r: "1"
                },
                null,
                8,
                _hoisted_7
              ),
              createElementVNode(
                "circle",
                {
                  fill: unref(propValue).base.color1,
                  cx: width.value - 11,
                  cy: height.value - 11,
                  r: "1"
                },
                null,
                8,
                _hoisted_8
              ),
              createElementVNode(
                "circle",
                {
                  fill: unref(propValue).base.color1,
                  cx: "11",
                  cy: height.value - 11,
                  r: "1"
                },
                null,
                8,
                _hoisted_9
              )
            ],
            8,
            _hoisted_2
          ))
        ])),
        [[_directive_resize, resizeHandler]]
      );
    };
  }
});
const BorderBox = /* @__PURE__ */ _export_sfc(_sfc_main, [
  ["__scopeId", "data-v-f70f8edd"]
]);
export { BorderBox as default };
